<template>
  <div class="page">
    <h4 style="margin-left: 3px">基本信息筛选</h4>
    <el-row :gutter="20">
      <el-form id="formbox" ref="formInline" :inline="true" :model="formInline">
        <el-col :span="8" class="mb20">
          <el-form-item label="姓名 :" prop="name">
            <el-input
              clearable
              v-model="formInline.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="证件号码 :" prop="cardNumber">
            <el-input
              clearable
              v-model="formInline.cardNumber"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="录入人 :" prop="inputPerson">
            <el-input
              clearable
              v-model="formInline.inputPerson"
              placeholder="请输入录入人"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="mb20">
          <el-form-item label="回填状态 :" prop="backFillingStatus">
            <el-select
              clearable
              v-model="formInline.backFillingStatus"
              placeholder="请选择回填状态"
            >
              <el-option label="回填成功" value="回填成功"></el-option>
              <el-option label="回填失败" value="回填失败"></el-option>
              <el-option label="未回填" value="未回填"></el-option>
              <el-option label="已人工回填" value="已人工回填"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="mb20">
          <el-form-item label="创建日期 :" prop="followTime">
            <el-date-picker
              v-model="formInline.followTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
              :disabled-date="disableFutureDates"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8" class="mb20">
          <el-form-item label="体质类型 :" prop="constitutionType">
            <el-select
              v-model="formInline.constitutionType"
              placeholder="请选择体质类型"
            >
              <el-option label="气虚质" value="气虚质"></el-option>
              <el-option label="阳虚质" value="阳虚质"></el-option>
              <el-option label="阴虚质" value="阴虚质"></el-option>
              <el-option label="痰湿质" value="痰湿质"></el-option>
              <el-option label="湿热质" value="湿热质"></el-option>
              <el-option label="血瘀质" value="血瘀质"></el-option>
              <el-option label="气郁质" value="气郁质"></el-option>
              <el-option label="特禀质" value="特禀质"></el-option>
              <el-option label="平和质" value="平和质"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="form-button">
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="onReset('formInline')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="table-container">
      <el-col :span="24"
        ><h4 style="margin-left: 3px">体质辨别 (共{{ total }}条)</h4></el-col
      >
      <el-col :span="24" style="display: flex">
        <el-col :span="4">
          <div class="table-btn">
            <div>
              <el-checkbox
                @change="checkedAllChange"
                v-model="checkedAll"
                :label="'全选'"
                :disabled="tableData.length == 0"
              />
            </div>
            <div style="margin-right: 10px">
              <label
                >已选择<el-text type="primary">{{
                  checkedAll == true ? selectionCount : multipleSelection.length
                }}</el-text
                >条</label
              >
            </div>
          </div>
        </el-col>
        <el-col :span="20" class="tr">
          <router-link to="/physicals/addHealth" style="margin-right: 10px">
            <el-button type="primary">新增体质辨识</el-button>
          </router-link>
          <el-button
            type="primary"
            :disabled="multipleSelection.length === 0"
            @click="manualBackfilling()"
            >已人工回填</el-button
          >
          <el-button
            style="width: 87.6px; color: #fff"
            type="primary"
            :disabled="multipleSelection.length === 0"
            @click="exportSelect()"
            >导出</el-button
          >
          <el-button
            :disabled="multipleSelection.length === 0"
            type="danger"
            @click="testSt()"
            style="width: 87.6px; color: #fff"
            >删除</el-button
          >

          <!-- <el-button
            :disabled="multipleSelection.length === 0"
            type="primary"
            @click="testSt()"
            >数据采集</el-button
          > -->
          <el-button
            :disabled="multipleSelection.length === 0"
            type="primary"
            @click="showUpload()"
            style="color: #fff"
            >更新HIS</el-button
          >
        </el-col>
      </el-col>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      border
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
      tooltip-effect="light"
      row-key="id"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="setClassName"
      max-height="470px"
    >
      <!-- v-loading="loading" -->
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column type="index" label="序号" width="80" align="center" fixed="left" />
      <el-table-column
        prop="name"
        label="姓名"
        width="80"
        align="center"
        show-overflow-tooltip
        fixed="left" 
      />
      <el-table-column
        prop="cardNumber"
        label="证件号码"
        align="center"
        width="180"
        show-overflow-tooltip
      />

      <!-- <el-table-column
        prop="visitTime"
        label="质控-错误类"
        align="center"
        width="180"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span>{{ scope.row.visitTime ? scope.row.visitTime : " - " }}</span>
        </template>
      </el-table-column> -->

      <el-table-column
        prop="createTime"
        align="center"
        width="180"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column
        prop="backFillingStatus"
        label="回填状态"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="inputPerson"
        label="录入人"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="qiDeficiencyConstitutionChoice"
        label="气虚质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{
            scope.row.qiDeficiencyConstitutionChoice == "1"
              ? "是"
              : scope.row.qiDeficiencyConstitutionChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="yangDeficiencyConstitutionChoice"
        label="阳虚质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.yangDeficiencyConstitutionChoice == "1"
              ? "是"
              : scope.row.yangDeficiencyConstitutionChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
    </el-table-column>
      <el-table-column
        prop="yinDeficiencyConstitutionChoice"
        label="阴虚质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.yinDeficiencyConstitutionChoice == "1"
              ? "是"
              : scope.row.yinDeficiencyConstitutionChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
    </el-table-column>
     
        <el-table-column
        prop="phlegmDampnessConstitutionGuidance"
        label="痰湿质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.phlegmDampnessConstitutionGuidance == "1"
              ? "是"
              : scope.row.phlegmDampnessConstitutionGuidance == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
        </el-table-column>
      <el-table-column
        prop="dampHeatConstitutionChoice"
        label="湿热质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.dampHeatConstitutionChoice == "1"
              ? "是"
              : scope.row.dampHeatConstitutionChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
    </el-table-column>
      
      
      <el-table-column
        prop="bloodStasisSubstanceChoice"
        label="血瘀质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.bloodStasisSubstanceChoice == "1"
              ? "是"
              : scope.row.bloodStasisSubstanceChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
    </el-table-column>
   
      
      <el-table-column
        prop="name"
        label="气郁质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.qiStagnationConstitutionChoice == "1"
              ? "是"
              : scope.row.qiStagnationConstitutionChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="特禀质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.specialQualityChoice == "1"
              ? "是"
              : scope.row.specialQualityChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
    </el-table-column>
      
      <el-table-column
        prop="name"
        label="平和质"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          {{
            scope.row.peacefulQualityChoice == "1"
              ? "是"
              : scope.row.peacefulQualityChoice == "2"
                ? "倾向是"
                : "否"
          }}
        </template>
    </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="150"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            text=""
            size="small"
            type="primary"
            @click="openEditResidents(scope.row)"
            >编辑</el-button
          >
          <el-button
            text=""
            size="small"
            type="danger"
            @click="delFollow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-col
      :span="24"
      style="display: flex; justify-content: end; margin-bottom: 50px"
    >
      <el-pagination
        v-if="this.total > 0"
        v-model:currentPage="this.currentPage"
        v-model:page-size="this.pageSize"
        :total="this.total"
        :page-sizes="[10, 20, 50, 100, 500]"
        class="new-pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
    <!--@reloadTable="handleQuery" -->
  </div>
  <EditDialog
    ref="editDialogRef"
    :dialogObj="dialogObj"
    @refreshData="getList"
  />
</template>

<script lang="ts">
import http from "@/utils/request";
import { getUserName } from "@/utils/common";
import { ElMessage } from "element-plus";
import MenuCheck from "@/components/menu-check/index.vue";
import DeptList from "@/components/dept-list/index.vue";
import EditDialog from "@/pages/examples/healthy/components/editDialog.vue";
import { forIn } from "lodash";
const disableFutureDates = (time) => time > new Date();

export default {
  components: {
    MenuCheck,
    DeptList,
    EditDialog,
  },

  data() {
    return {
      //记录条数
      total: 1,
      //每页条数
      pageSize: 10,
      //当前页码
      currentPage: 1,
      //选择条数
      selectionCount: 0,
      //选择数组
      multipleSelection: [],
      //全选状态
      checkedAll: false,
      dialogObj: {
        //弹窗标题
        editResidentsTitle: "",
        //弹窗是否显示
        isDialogVisible: false,
      },
      //表格数据
      tableData: [],
      ruleform: {
        name: "",
      },
      formInline: {
        //姓名
        name: "",
        //证件号码
        cardNumber: "",
        //录入人
        inputPerson: "",
        // 回填状态
        backFillingStatus: "",
        //创建日期
        followTime: "",
        startTime: "",
        endTime: "",
        constitutionType: "",
      },
      personInfo: {
        name: "",
        cardNumber: "",
        birthday: "",
        cardType: "",
        id: "",
      },
    };
  },
  methods: {
    disableFutureDates,
       //人工回填
       manualBackfilling() {
      const upArr = [];
      this.multipleSelection.forEach((item) => {
        upArr.push(
          item.id,
        );
      });
      
      const arrTrue3 = this.multipleSelection.every((item) => {
        return item.backFillingStatus !== "已人工回填";
      });

      if (arrTrue3) {
        http
          .post("/healthManage/manuallyProcessed", upArr)
          .then((res) => {
            //@ts-ignore
            if (res.code == 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.getList();
              this.multipleSelection = [];
              this.checkedAll = false;
              this.$refs.multipleTableRef.clearSelection();
            } else {
            }
          })
          .catch((err) => {});
      } else {
        ElMessage.error("存在已人工回填数据不可操作");
      }
    },
    //获取列表
    getList() {
      const requestData = { page: this.currentPage, size: this.pageSize };
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          requestData[key] = this.formInline[key];
        }
      }
      //@ts-ignore
      if (requestData.followTime) {
        //@ts-ignore
        requestData.startTime = requestData.followTime[0];
        //@ts-ignore
        requestData.endTime = requestData.followTime[1];
        //@ts-ignore
        delete requestData.followTime;
      }

      console.log(requestData);

      http.post("/healthManage/list", requestData).then((res) => {
        //@ts-ignore
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },

    //重置搜索
    onReset(formName) {
      this.$refs[formName].resetFields();

      this.formInline.startTime = "";
      this.formInline.nextFollowTime = "";
      this.currentPage = 1;
    },
    //打开详情页面
    delResidents(row) {
      this.dialogObj.editResidentsTitle = "详情";
      this.dialogObj.isDialogVisible = true;
    },
    //打开编辑页
    openEditResidents(row) {
      this.dialogObj.editResidentsTitle = "编辑";
      console.log(row);

      for (const key in row) {
        if (this.personInfo.hasOwnProperty(key)) {
          this.personInfo[key] = row[key];
        }
      }
      http
        .post("/healthManage/getHealthManageScoreDetail", { id: row.id })
        .then((res) => {
          //@ts-ignore
          if (res.code == 200) {
            this.dialogObj.editResidentsData = res.data;
            this.dialogObj.editResidentsData.personInfo = this.personInfo;
            this.dialogObj.isDialogVisible = true;
          }
        });
    },
    //删除
    //删除随访
    delFollow(row) {
      this.$confirm(`是否确定删除${row.name}的体质辨别记录`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http
            .post("/healthManage/delete",
            //  {
            //   id: row.id,
            //   healthManageDetailId: row.healthManageDetailId,
            // }
            [row.id]
          )
            .then((res) => {
              //@ts-ignore
              if (res.code == 200) {
                this.$refs.multipleTableRef!.clearSelection();
                this.getList();
                //@ts-ignore
                ElMessage.success(res.message);
              } else {
              }
            });
        })
        .catch(() => {});
    },
    // 改变页面容量
    handleSizeChange(val: number) {
      this.pageSize = val;
      this.getList();
    },

    // 改变页码序号
    handleCurrentChange(val: number) {
      this.currentPage = val;
      this.getList();
    },
    checkSelectable() {
      return this.checkedAll != true;
    },
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;
        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    handleSelectionChange(val) {
    
        this.multipleSelection = val;
     
        if(val.length==this.total||val.length==this.pageSize){
        this.checkedAll = true;
        this.selectionCount=val.length;
        
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      } 
    },
    setClassName({ column }) {
      return this.checkedAll == true ? "all-disabled" : "";
    },

    //导出
    exportSelect() {
      let idList = this.multipleSelection.map((item) => item.id);
      http.post("/healthManage/exportSelect", idList).then((res) => {
        //@ts-ignore
        if (res.code == 200) {
           //@ts-ignore
           ElMessage.success(res.message);
          this.multipleSelection=[];
          this.checkedAll=false;
          this.$refs.multipleTableRef.clearSelection();
          window.open(res.data);
        }
      });
    },
    //删除
    testSt() {
      const idList=this.multipleSelection.map(item=>item.id);
      this.$confirm("是否确定删除已选择数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/healthManage/delete",idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.multipleSelection=[];
              this.$refs.multipleTableRef!.clearSelection();
              this.checkedAll=false;
              this.getList();
            } 
          });
        })
        .catch(() => {});
    },

    //更新his
    showUpload() {
      const upArr = [];
      const that = this;
      // const loading = this.$loading({
      //   lock: true,
      //   text: "更新中...",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",                                                                    
      // });
      this.multipleSelection.forEach((v) => {
        let cardNumber = v.cardNumber?.replace(/[\t\r].*/, "");
        let cardType = v.cardType?.replace(/[\t\r].*/, "");
        let name = v.name?.replace(/[\t\r].*/, "");
        upArr.push({
          id:v.id,
          cardNumber: cardNumber,
          cardType: cardType,
          exaTime: v.followTime,
          name: name,
          callType: "HealthManageBackFilling",
          flowType: "backFilling",
          inputPerson: v.inputPerson,
          submitter: getUserName(),
          firstPriority: 2,
          secondPriority: 3,
        });
      });

      http
        .post("/collectAndBackFilling/submit", upArr, { timeout: 10800000 })
        .then((res) => {
          //@ts-ignore
          if (res.code == 200) {
            // loading.close();
             //@ts-ignore
            ElMessage.success(res.message);
            this.multipleSelection = [];
            this.selectionCount = 0;
            this.$refs.multipleTableRef!.clearSelection();
            this.getList();
          }
        })
        .catch((err) => {
          console.log(err);
          // loading.close();
        });
    },
  },
  computed: {},
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.page {
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}
#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.mb20 {
  /* margin: 0 20px; */
}
:deep(.el-input__wrapper) {
  width: 230px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
.form-button {
  display: flex;
  justify-content: start;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.tr {
  text-align: right;
  height: 50px;
  line-height: 50px;
}
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
  display: none;
}

.new-pagination {
  margin: 30px 0 10px 0 !important;
}
</style>
